<template>
  <div class="app-container">
    <el-container>
      <el-header style="
          width: 100%;
          height: 37px;
          font-size: 27px;
          font-weight: bold;
          text-align: center;
        ">
        {{ compBasicInfoForm.compName }}
      </el-header>

      <el-main style="padding: 0">
        <el-tabs type="border-card" name="first">

          <el-tab-pane label="一：基本信息">
            <span slot="label"><i class="el-icon-date"></i> 基本信息 </span>

            <el-descriptions title="基本信息：" class="margin-top" :column="3" size="medium" border>
              <el-descriptions-item style="padding: 15px">
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                <el-link target="_blank" :href="'https://www.tianyancha.com/search?key=' +
                  compBasicInfoForm.compName
                  ">
                  {{ compBasicInfoForm.compName }}
                </el-link>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  法人
                </template>
                {{ compBasicInfoForm.compOwner }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  经营状态
                </template>
                {{ compBasicInfoForm.opStatus }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  省份
                </template>
                {{ compBasicInfoForm.province }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  地市
                </template>
                {{ compBasicInfoForm.city }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  区县
                </template>
                {{ compBasicInfoForm.district }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  街道/乡镇
                </template>
                {{ compBasicInfoForm.street }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  详细地址
                </template>
                {{ compBasicInfoForm.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  公司类型
                </template>
                {{ compBasicInfoForm.compType }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  注册资本
                </template>
                {{ compBasicInfoForm.regCap }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  联系电话
                </template>
                {{ compBasicInfoForm.phone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  其他电话
                </template>
                {{ compBasicInfoForm.otherPhone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  Email
                </template>
                {{ compBasicInfoForm.email }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  曾用名
                </template>
                {{ compBasicInfoForm.oldName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  成立日期
                </template>
                {{ compBasicInfoForm.foundDay }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  行业
                </template>
                {{ compBasicInfoForm.industry }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  网址
                </template>
                <el-link target="_blank" :href="compBasicInfoForm.url" style="color: green">
                  {{ compBasicInfoForm.url }}
                </el-link>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  经营范围：
                </template>
                {{ compBasicInfoForm.businessScope }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="行业信息：" :column="3" size="medium" style="margin-top: 30px" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户等级：
                </template>
                {{ compBasicInfoForm.customRank }}
              </el-descriptions-item>

              <el-descriptions-item style="padding: 15px">
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户分类:
                </template>
                {{ compBasicInfoForm.classify }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  维护进度：
                </template>
                {{ compBasicInfoForm.businessProgress }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  市 值:
                </template>
                {{ compExtendInfoForm.cus_cap }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  实缴资本
                </template>
                {{ compBasicInfoForm.realCap }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  参保人数
                </template>
                {{ compBasicInfoForm.empNum }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  产品类型：
                </template>
                {{ compExtendInfoForm.prod_list }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  竞争对手:
                </template>
                {{ compExtendInfoForm.prod_competitor_brand }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  推荐品牌
                </template>
                {{ compExtendInfoForm.prod_recommend_brand }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  营 收:
                </template>
                {{ compExtendInfoForm.cus_revenue }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  净利润:
                </template>
                {{ compExtendInfoForm.cus_profit }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户生产的产品
                </template>
                {{ compExtendInfoForm.cus_product }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户的竞争对手
                </template>
                {{ compExtendInfoForm.cus_competitor }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户的客户
                </template>
                {{ compExtendInfoForm.cus_customer }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  客户的上游供应商
                </template>
                {{ compExtendInfoForm.cus_provider }}
              </el-descriptions-item>
            </el-descriptions>

            <div style="text-align: center; margin-top: 20px">
              <el-button type="primary" :loading="kqExtendLoading" @click="handleModifyExtendInfo">编 辑</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="二：组织架构">
            <span slot="label"><i class="el-icon-date"></i> 组织架构 </span>
            <el-row :gutter="20">
              <!-- 部门数据 -->
              <el-col :span="5" :xs="24">
                <div class="head-container">
                  <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
                    style="margin-bottom: 20px" />
                </div>
                <div class="head-container">
                  <el-tree ref="tree" :data="deptOptions" :props="defaultProps" expand-on-click-node
                    :filter-node-method="filterNode" :auto-expand-parent="false" :indent="30" icon-class="el-icon-rank"
                    accordion @node-click="handleNodeClick" />
                </div>
              </el-col>
              <!--用户数据-->
              <el-col :span="19" :xs="24">
                <el-form ref="queryForm" :model="queryOrgParams" :inline="true" label-width="68px">
                  <el-form-item label="用户名称" prop="name">
                    <el-input v-model="queryOrgParams.name" placeholder="请输入用户名称" clearable size="small"
                      style="width: 240px" @keyup.enter.native="handleOrgQuery" />
                  </el-form-item>
                  <el-form-item label="手机号码" prop="mobile">
                    <el-input v-model="queryOrgParams.mobile" placeholder="请输入手机号码" clearable size="small"
                      style="width: 240px" @keyup.enter.native="handleOrgQuery" />
                  </el-form-item>
                  <el-form-item label="是否在职" prop="is_staff">
                    <el-select v-model="queryOrgParams.is_staff" placeholder="用户状态" clearable size="small"
                      style="width: 240px">
                      <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                        :value="dict.dictValue" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleOrgQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetOrgQuery">重置</el-button>
                  </el-form-item>
                </el-form>

                <el-table v-loading="orgLoading" :data="userOrgList">
                  <!-- <el-table-column key="id" label="用户编号" align="center" prop="id" /> -->
                  <el-table-column key="name" label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
                  <el-table-column label="职位" align="center" prop="posts" width="160">
                    <template slot-scope="scope">
                      <span>{{ scope.row.posts }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column key="deptName" label="部门" align="center" prop="dept.deptName"
                    :show-overflow-tooltip="true" />

                  <el-table-column key="mobile" label="手机号码" align="center" prop="mobile" width="120" />
                  <el-table-column key="email" label="邮箱" align="center" prop="email" width="180" />

                  <el-table-column key="is_staff" label="是否在职" align="center">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.is_staff" disabled />
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="创建时间" align="center" prop="create_datetime" width="160">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.create_datetime) }}</span>
                    </template>
                  </el-table-column> -->

                  <!-- <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                  </el-table-column> -->
                </el-table>
                <pagination v-show="orgTotal > 0" :total="orgTotal" :page.sync="queryOrgParams.pageNum"
                  :limit.sync="queryOrgParams.pageSize" @pagination="getOrgUserList" />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="三：报价信息">
            <span slot="label"><i class="el-icon-date"></i> 报价信息 </span>
            <el-form ref="orderQueryForm" :model="orderParams" :inline="true" label-width="85px">

              <el-form-item label="报价单状态:" prop="status" label-width="100px">
                <el-select v-model="orderParams.status" placeholder="状态" clearable size="small"
                  @change="handleOrderQuery">
                  <el-option v-for="dict in quote_options" :key="dict.dictValue" :label="dict.dictLabel"
                    :value="dict.dictValue">{{ dict.dictLabel }}
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleOrderQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="orderResetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-table v-loading="orderLoading" height="650" :data="kqAllOrderList" stripe>
              <el-table-column label="项目名称" align="center" prop="projectName" show-overflow-tooltip min-width="200" />
              <el-table-column label="公司名称" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-link target="_blank" :href="'https://www.tianyancha.com/search?key=' + scope.row.compName
                    ">
                    {{ scope.row.compName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="dealNum" label="成交额(万)" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.allItemTotalNum / 10000 }}
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" width="150" class-name="small-padding">
                <template slot-scope="scope">
                  {{ scope.row.status }}
                </template>
              </el-table-column>
              <el-table-column label="总折扣" align="center" prop="totalDiscount" show-overflow-tooltip />
              <el-table-column label="创建时间" align="center" prop="create_datetime" show-overflow-tooltip />
            </el-table>
            <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="orderParams.pageNum"
              :limit.sync="orderParams.pageSize" @pagination="getOrderList" />
          </el-tab-pane>
          <el-tab-pane label="四：维护信息">
            <span slot="label"><i class="el-icon-date"></i> 维护信息 </span>
            <el-form ref="kqMaintainInfoQueryForm" :model="mainTainQueryParams" :inline="true" label-width="85px">

              <el-form-item label="创建时间">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                  type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini"
                  @click="handleMaintainInfoQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="kqMaintainInfoResetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-table v-loading="kqMaintainInfoLoading" :data="kqMaintainInfoList" height="650" stripe>
              <el-table-column type="index" width="38" align="center" />
              <el-table-column label="拜访时间" align="center" prop="create_datetime" show-overflow-tooltip />
              <el-table-column label="公司名称" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-link target="_blank" :href="'https://www.tianyancha.com/search?key=' + scope.row.compName
                    ">
                    {{ scope.row.compName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column label="拜访目的" align="center" prop="purpose" show-overflow-tooltip />

              <el-table-column label="拜访详情" align="center" prop="extendDesc" show-overflow-tooltip />
              <el-table-column label="拜访效果" align="center" prop="score" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-rate v-model="scope.row.score" class-name="rateClass"></el-rate>
                </template>

              </el-table-column>

              <el-table-column label="沟通方式" align="center" show-overflow-tooltip>

                <template slot-scope="scope">
                  <el-tooltip v-if="scope.row.maintainType == '电话'" content="电话沟通" placement="top">
                    <el-button type="primary" icon="el-icon-phone" circle></el-button>
                  </el-tooltip>
                  <el-tooltip v-if="scope.row.maintainType == '拜访'" content="实地拜访" placement="top">
                    <el-button type="primary" icon="el-icon-s-home" circle></el-button>
                  </el-tooltip>
                  <el-tooltip v-if="scope.row.maintainType == '微信'" content="微信沟通" placement="top">
                    <el-button type="primary" icon="el-icon-chat-dot-round" circle></el-button>
                  </el-tooltip>
                  <el-tooltip v-if="scope.row.maintainType == '邮件'" content="邮件沟通" placement="top">
                    <el-button type="primary" icon="el-icon-message" circle></el-button>
                  </el-tooltip>

                </template>

              </el-table-column>

            </el-table>

            <pagination v-show="mainTotal > 0" :total="mainTotal" :page.sync="mainTainQueryParams.pageNum"
              :limit.sync="mainTainQueryParams.pageSize" @pagination="getMainTainList" />

          </el-tab-pane>
          <!-- <el-tab-pane label="五：凯泉交易记录">
            <el-table
              :data="kqOrderList"
              height="650"
              style="width: 100%"
              stripe
            >
              <el-table-column type="index" align="center" />
              <el-table-column prop="orderDate" label="日期" />
              <el-table-column prop="maxDepartment" label="大区" />
              <el-table-column prop="department" label="部门" width="200" />
              <el-table-column prop="collaborator" label="业务员" />
              <el-table-column prop="sex" label="性别" width="50" />
              <el-table-column prop="isEmployed" label="是否在职">
                <template slot-scope="scope">
                  {{ scope.row.isEmployed ? "是" : "否" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="项目名称"
                show-overflow-tooltip
              />
              <el-table-column prop="dealNum" label="成交额(万)">
                <template slot-scope="scope">
                  {{ scope.row.dealNum / 10000 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="products"
                label="采购信息"
                show-overflow-tooltip
              />
              <el-table-column prop="orderType" label="类型" />
            </el-table>
          </el-tab-pane>  -->
        </el-tabs>
      </el-main>
    </el-container>
    <el-drawer :title="compBasicInfoForm.compName" :visible.sync="compBasicInfoDrawerVisible" size="50%"
      :with-header="true">
      <el-container>
        <el-main>
          <el-form ref="compBasicInfoForm" :inline="true" :model="compBasicInfoForm">
            <el-form-item label-width="100px" label="客户分类:" prop="classify">
              <el-select v-model="compBasicInfoForm.classify" filterable placeholder="请选择">
                <el-option v-for="dict in cus_classify_option" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue">{{ dict.dictLabel }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="100px" label="成交进度:" prop="businessProgress">
              <el-select v-model="compBasicInfoForm.businessProgress" filterable placeholder="请选择">
                <el-option v-for="dict in cus_business_options" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue">{{ dict.dictLabel }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="100px" label="客户等级:" prop="customRank">
              <el-select v-model="compBasicInfoForm.customRank" filterable placeholder="请选择">
                <el-option v-for="dict in cus_rank_options" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue">{{ dict.dictLabel }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button type="primary" :loading="compBasicInfoDrawerloading" @click="updateCompBasicInfoFunc">
              {{
                compBasicInfoDrawerloading ? "提交中 ..." : "确 定"
              }}</el-button>
          </div>
          <el-form ref="compExtendInfoForm" :inline="true" :model="compExtendInfoForm">
            <el-form-item label="营 收:" prop="cus_revenue" label-width="120px">
              <el-input v-model="compExtendInfoForm.cus_revenue" placeholder="请输入年营业收入" clearable size="small" />
            </el-form-item>
            <el-form-item label="净利润:" prop="cus_profit">
              <el-input v-model="compExtendInfoForm.cus_profit" placeholder="请输入净利润" clearable size="small" />
            </el-form-item>
            <el-form-item label="市 值:" prop="cus_cap">
              <el-input v-model="compExtendInfoForm.cus_cap" placeholder="请输入市值" clearable size="small" />
            </el-form-item><br />
            <el-form-item label="产 品:" prop="cus_product" label-width="120px">
              <el-input v-model="compExtendInfoForm.cus_product" placeholder="请输入产品" clearable style="width: 400px"
                size="small" /> </el-form-item><br />
            <el-form-item label="客户的客户:" prop="cus_customer" label-width="120px">
              <el-input v-model="compExtendInfoForm.cus_customer" placeholder="请输入客户的客户" style="width: 400px" clearable
                size="small" /> </el-form-item><br />

            <el-form-item label="客户的竞争对手:" prop="cus_competitor" label-width="120px">
              <el-input v-model="compExtendInfoForm.cus_competitor" placeholder="请输入客户的竞争对手" style="width: 400px"
                clearable size="small" /> </el-form-item><br />

            <el-form-item label="客户的供应商:" prop="cus_provider" label-width="120px">
              <el-input v-model="compExtendInfoForm.cus_provider" placeholder="请输入客户的供应商" style="width: 400px" clearable
                size="small" /> </el-form-item><br />

            <el-form-item label-width="120px" label="产品类型:" prop="prod_list">
              <el-select v-model="compExtendInfoFormCache.prod_list" multiple filterable placeholder="请选择"
                style="width: 400px">
                <el-option v-for="dict in pump_options" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue">{{ dict.dictLabel }}
                </el-option>
              </el-select> </el-form-item><br />
            <el-form-item label-width="120px" label="竞争对手:" prop="prod_competitor_brand">
              <el-select v-model="compExtendInfoFormCache.prod_competitor_brand" multiple filterable placeholder="请选择"
                style="width: 400px">
                <el-option v-for="dict in prod_competitor_brand_options" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue">{{ dict.dictLabel }}
                </el-option>
              </el-select> </el-form-item><br />
            <el-form-item label-width="120px" label="推荐品牌:" prop="prod_recommend_brand">
              <el-select v-model="compExtendInfoFormCache.prod_recommend_brand" multiple filterable placeholder="请选择"
                style="width: 400px">
                <el-option v-for="dict in my_prod_brand_options" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue">{{ dict.dictLabel }}
                </el-option>
              </el-select> </el-form-item><br />
          </el-form>
          <div style="text-align: right">
            <el-button type="primary" :loading="compExtendInfoDrawerloading" @click="updateCompExtendInfoFunc">
              {{
                compExtendInfoDrawerloading ? "提交中 ..." : "确 定"
              }}</el-button>
          </div>
        </el-main>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
import { updateKqInfo, getKqInfo } from "@/api/work/work";
// import { getAllKqOrdersList } from "@/api/work/allKqOrders";
import {
  addKqExtendInfo,
  updateKqExtendInfo,
  getExtendInfoByCompId
  // getKqExtendInfo,
  // listKqAllExtendInfos
} from "@/api/work/kqExtendInfos";
import { getKqMaintainInfosList } from "@/api/work/kqMaintainInfo";
import { listKqAllPriceInfos } from "@/api/work/kqPriceInfos";
import { treeselect } from "@/api/vadmin/permission/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  // addUser,
  // delUser,
  // exportUser,
  // getUser,
  listUser
  // updateUser
} from "@/api/company/user";
export default {
  name: "Work",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      // changeLoading: false,
      compId: undefined,
      // ---------------- loading---------------------
      loading: true,
      orderLoading: false,
      kqMaintainInfoLoading: false,
      kqExtendLoading: false,
      compBasicInfoDrawerloading: false,
      compExtendInfoDrawerloading: false,
      // ---------------- loading---------------------
      // ---------------- DrawerVisible---------------------
      compBasicInfoDrawerVisible: false,

      // ---------------- DrawerVisible---------------------
      // ---------------- option---------------------
      cus_business_options: [],
      cus_classify_option: [],
      pump_options: [],
      cus_rank_options: [],
      prod_competitor_brand_options: [],
      my_prod_brand_options: [],
      quote_options: [],
      statusOptions: [
        { dictLabel: "在职", dictValue: true },
        { dictLabel: "离职", dictValue: false }
      ],

      // ---------------- option---------------------

      // ---------------- flag---------------------
      // 数据库是否存在 公司拓展数据
      isExsitCompExtendInfo: false,
      // ---------------- flag---------------------
      //  showSearch: true,
      // ---------------- flag---------------------
      // ---------------- form---------------------
      // 表单参数
      compBasicInfoForm: {},
      compExtendInfoForm: {},
      compExtendInfoFormCache: {},
      // ---------------- form---------------------
      // ------tree-------------------
      // 部门树选项
      deptOptions: undefined,
      orgTotal: 0,
      orgLoading: true,
      // 用户表格数据
      userOrgList: null,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryOrgParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        mobile: undefined,
        is_active: undefined,
        deptId: undefined
      },
      // ------tree-------------------
      deptName: undefined,
      // tab
      // tabIndex: "first",
      // 选中数组
      // ids: [],

      // 总条数
      // total: 0,
      orderTotal: 0,
      mainTotal: 0,
      // 岗位表格数据
      // kqAllInfoList: [],
      // 订单表格数据
      // kqOrderList: [],
      kqMaintainInfoList: [],
      // 是否显示数据详情页面
      // isShowDetail: false,
      // businessProgressList: [],
      kqAllOrderList: [],
      dateRange: undefined,
      // businessProgress: undefined,

      // kqInfoLoading: false,
      // modifyLoading: false,
      // compBasicInfoDrawerloading: false,
      // title: "",
      // open: false,

      // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   // 客户优先级[默认大客户]
      //   customRank: undefined,
      //   compName: undefined,
      //   province: undefined,
      //   city: undefined,
      //   businessProgress: undefined,
      //   isDelete: false,
      //   isMyCustomer: true
      // },
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        kqId: undefined
      },
      // 查询参数
      mainTainQueryParams: {
        pageNum: 1,
        pageSize: 10,
        compName: undefined,
        kqId: undefined
      },

    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getDicts("cus_classify_option").then((response) => {
      this.cus_classify_option = response.data;
    });
    this.getDicts("cus_business_options").then((response) => {
      this.cus_business_options = response.data;
    });
    this.getDicts("pump_options").then((response) => {
      this.pump_options = response.data;
    });
    this.getDicts("cus_rank_options").then((response) => {
      this.cus_rank_options = response.data;
    });
    this.getDicts("prod_competitor_brand_options").then((response) => {
      this.prod_competitor_brand_options = response.data;
    });
    this.getDicts("my_prod_brand_options").then((response) => {
      this.my_prod_brand_options = response.data;
    });
    this.getDicts("quote_options").then((response) => {
      this.quote_options = response.data;
    });
    this.compId = this.$route.params && this.$route.params.id;
    this.getCustomerInfo(this.compId);
    this.getCustomerExtendInfo(this.compId);
    this.getTreeselect();
    this.getOrgUserList();
    this.getOrderList();
    this.getMainTainList();
    // this.getCompRoleList();
    // 组织需要加载的数据
  },
  methods: {
    // getCompRoleList() {
    //   listUser(this.addDateRange(this.queryParams, [])).then(
    //     (response) => {
    //       this.userList = response.data.results;
    //       this.total = response.data.count;
    //       this.loading = false;
    //     }
    //   );
    // }
    resetOrgQuery() {
      // this.dateRange = [];
      this.queryOrgParams.deptId = "";
      this.resetForm("queryForm");
      this.handleOrgQuery();
    },
    /** 搜索按钮操作 */
    handleOrgQuery() {
      this.queryOrgParams.page = 1;
      this.getOrgUserList();
    },
    /** 查询用户列表 */
    getOrgUserList() {
      this.orgLoading = true;
      listUser(this.queryOrgParams).then(
        (response) => {
          this.userOrgList = response.data.results;
          this.orgTotal = response.data.count;
          this.orgLoading = false;
        }
      );
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryOrgParams.deptId = data.id;
      this.getOrgUserList();
    },
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = this.handleTree(response.data, "id");
      });
    },
    cancelCompBasicInfoDrawer() {
      this.compBasicInfoDrawerVisible = false;
    },
    getCustomerExtendInfo(id) {
      getExtendInfoByCompId(id).then((res) => {
        this.compExtendInfoForm = res.data.obj;

        this.compExtendInfoFormCache = Object.assign(
          {},
          this.compExtendInfoForm
        );

        this.isExsitCompExtendInfo = !!res.data.isExist;
        if (this.compExtendInfoFormCache.prod_list) {
          this.compExtendInfoFormCache.prod_list =
            this.compExtendInfoFormCache.prod_list.split(",");
        }
        if (this.compExtendInfoFormCache.prod_competitor_brand) {
          this.compExtendInfoFormCache.prod_competitor_brand =
            this.compExtendInfoFormCache.prod_competitor_brand.split(",");
        }
        if (this.compExtendInfoFormCache.prod_recommend_brand) {
          this.compExtendInfoFormCache.prod_recommend_brand =
            this.compExtendInfoFormCache.prod_recommend_brand.split(",");
        }
      });
    },
    updateCompExtendInfoFunc() {
      this.compExtendInfoDrawerloading = true;
      this.compExtendInfoForm.prod_list = this.compExtendInfoFormCache.prod_list
        .length
        ? this.compExtendInfoFormCache?.prod_list?.toString()
        : "";
      this.compExtendInfoForm.prod_competitor_brand = this
        .compExtendInfoFormCache.prod_competitor_brand.length
        ? this.compExtendInfoFormCache?.prod_competitor_brand?.toString()
        : "";
      this.compExtendInfoForm.prod_recommend_brand = this
        .compExtendInfoFormCache.prod_recommend_brand.length
        ? this.compExtendInfoFormCache?.prod_recommend_brand?.toString()
        : "";
      if (this.isExsitCompExtendInfo) {
        updateKqExtendInfo(this.compExtendInfoForm).then(() => {
          this.msgSuccess("详细信息修改成功！！");
          this.compExtendInfoDrawerloading = false;
        });
      } else {
        this.compExtendInfoForm = Object.assign({}, this.compExtendInfoForm, {
          kqId: this.compId,
          compName: this.compBasicInfoForm.compName
        });
        addKqExtendInfo(this.compExtendInfoForm).then(() => {
          this.msgSuccess("添加成功！！");

          this.compExtendInfoDrawerloading = false;
        });
      }
      // updateExtendInfo
    },
    updateCompBasicInfoFunc() {
      this.compBasicInfoDrawerloading = true;
      updateKqInfo(this.compBasicInfoForm).then(() => {
        this.msgSuccess("基本信息修改成功");
        this.compBasicInfoDrawerloading = false;
        this.getCustomerExtendInfo(this.compId);
        // this.compBasicInfoDrawerVisible = false;
      });
    },
    getCustomerInfo(id) {
      getKqInfo(id).then((res) => {
        this.compBasicInfoForm = res.data;
      });
    },

    handleModifyExtendInfo() {
      this.compBasicInfoDrawerVisible = true;
    },
    getOrderList() {
      this.orderLoading = true;
      this.orderParams.kqId = this.compId;
      listKqAllPriceInfos(this.orderParams).then((res) => {
        this.kqAllOrderList = res.data.results;
        this.orderTotal = res.data.count;
        this.orderLoading = false;
      });
    },
    getMainTainList() {
      this.kqMaintainInfoLoading = true;
      this.mainTainQueryParams.kqId = this.compId;
      getKqMaintainInfosList(
        this.addDateRange(this.mainTainQueryParams, this.dateRange)
      ).then((res) => {
        this.kqMaintainInfoList = res.data.results;
        this.mainTotal = res.data.count;
        this.kqMaintainInfoLoading = false;
      });
    },

    handleOrderQuery() {
      this.orderParams.pageNum = 1;
      this.getOrderList();
    },
    handleMaintainInfoQuery() {
      // this.mainTainQueryParams.kqId = this.form.id;
      this.getMainTainList();
    },
    orderResetQuery() {
      this.resetForm("orderQueryForm");
      this.handleOrderQuery();
    },
    kqMaintainInfoResetQuery() {
      this.resetForm("kqMaintainInfoQueryForm");
      this.dateRange = [];
      this.handleMaintainInfoQuery();
    },

    //     // 3报价信息
    //     const step3 = listKqAllPriceInfos(this.orderParams).then((res) => {
    //       this.kqAllOrderList = res.data.results;
    //       this.orderTotal = res.data.count;
    //     });
    //     // 4维护信息
    //     const step4 = getKqMaintainInfosList(
    //       this.addDateRange(this.mainTainQueryParams, this.dateRange)
    //     ).then((res) => {
    //       this.kqMaintainInfoList = res.data.results;
    //       this.mainTotal = res.data.count;
    //     });
    //     // 5 历史成交
    //     const step5 = getAllKqOrdersList(params).then((res) => {
    //       this.kqOrderList = res.data.results;
    //     });

    //     setTimeout(() => {
    //       Promise.all([step1, step2, step3, step4, step5]).then(() => {
    //         this.changeLoading = false;
    //       });
    //     }, 1000);
    //   },
    CopyFileUrl(values) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", values);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.msgSuccess("复制成功");
      }
      document.body.removeChild(input);
    }
  }
};
</script>
